<template>
  <div class="songList">
    <div class="songFilterMain">
      <div
        class="songFilterItem"
        v-for="(item, index) in songFilterTagList"
        :key="index"
      >
        <div class="tagTitle">{{ item.name }}</div>
        <div class="tagList">
          <span v-for="(jitem, index) in item.list" :key="index">
            {{ jitem.name }}
          </span>
        </div>
      </div>
    </div>
    <div class="">
      <fdCard
        :cardOption="hotCardOption"
        :activeName="hotActiveName"
        cardTitle="全部歌单"
        @changeActive="hotChangeActive"
      >
        <div
          class="hot-recommend-collectionItem"
          v-for="item in hotRecommendList"
          :key="item.id"
        >
          <div class="collection-cover">
            <img :src="item.coverImgUrl" alt="" />
            <span class="collectionInfo">
              <span
                ><el-icon
                  size="14"
                  style="vertical-align: bottom; padding-right: 4px"
                >
                  <Headset /> </el-icon
                >{{ playCountFilter(item.playCount) }}</span
              >
              <span>/</span>
              <span>{{ item.trackCount }}首</span>
            </span>
          </div>
          <div class="collection-content">
            <div class="collection-title">{{ item.name }}</div>
            <div class="collection-tag">{{ tagsFilter(item.tags) }}</div>
          </div>
        </div>
      </fdCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, inject } from "vue";
import fdCard from "../../components/fd-card.vue";
const axios = inject("$axios");
const songFilterTagList = ref([]);
const hotRecommendList = ref([]);
const hotCardOption = ref([
  {
    lable: "热门",
    value: "a1",
  },
  {
    lable: "最新",
    value: "a2",
  },
]);
const hotActiveName = ref("a1");

// 处理播放数过万
const playCountFilter = (num: number) => {
  if (num > 9999) {
    return Math.round(num / 1000) / 10 + "万";
  } else {
    return num;
  }
};

// 标签过滤器
const tagsFilter = (tagList: Object) => {
  let tagStr = "";
  for (const key in tagList) {
    tagStr = tagStr + "#" + tagList[key];
  }
  return tagStr;
};

const hotChangeActive = (row: any) => {
  console.log(row.lable);
};

const getSongFilterTagList = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/playlist/catlist"
  );
  const filterList = [];
  for (const key in resData.categories) {
    const filterObjs = {
      name: resData.categories[key],
      list: [],
    };
    filterObjs.list = resData.sub.filter((item: any) => item.category == key);
    if (filterObjs.list.length > 15) {
      filterObjs.list = filterObjs.list.splice(0, 15);
    }
    filterList.push(filterObjs);
  }
  songFilterTagList.value = filterList;
};

const getAllSongList = async () => {
  const { data: resData } = await axios.get(
    "http://127.0.0.1:3000/top/playlist?limit=48&order=hot&cat=&offset=0"
  );
  hotRecommendList.value = resData.playlists;
};

onMounted(() => {
  getSongFilterTagList();
  getAllSongList();
});
</script>
<style scoped lang="scss">
$titleColor: #ff0003;
.songFilterMain {
  height: 200px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 20px 27px #0000000d;
  display: flex;
  justify-content: space-around;
  padding: 25px 15px;

  .songFilterItem {
    flex: 1;
    border-right: 1px #f3f3f3 solid;
    font-size: 14px;
    box-sizing: border-box;
    padding: 15px;
    padding-top: 0px;

    .tagTitle {
      margin-bottom: 10px;
      font-weight: bold;
    }

    .tagList {
      color: #555;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      span {
        display: inline-block;
        width: 90px;
        height: 26px;
      }
    }
  }
}

  .hot-recommend-collectionItem {
    width: 228px;
    height: 290px;
    margin-right: 30px;
    margin-bottom: 20px;
    .collection-cover {
      width: 100%;
      height: 220px;
      border-radius: 8px;
      background-color: #f3f3f3;
      cursor: pointer;
      margin-bottom: 5px;
      position: relative;
      z-index: 1;

      .collectionInfo {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.5) 97%,
          rgba(0, 0, 0, 0.5) 100%
        );
        z-index: 2;
        font-size: 12px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 10px;
        padding-right: 4px;
        color: #fff;
        border-top-right-radius: 3px;

        span {
          padding-right: 4px;
        }
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }

      &::before {
        content: "";
        width: 145px;
        height: 208px;
        background-color: #dbdbdb;
        position: absolute;
        top: 5px;
        right: -5px;
        z-index: -1;
        border-radius: 3px;
      }

      &::after {
        content: "";
        width: 135px;
        height: 198px;
        background-color: #f3f3f3;
        position: absolute;
        top: 10px;
        right: -10px;
        z-index: -2;
        border-radius: 3px;
      }
    }
    .collection-content {
      box-sizing: border-box;
      padding: 5px;
      font-size: 14px;
      .collection-tag {
        font-size: 12px;
        color: $titleColor;
        padding-top: 8px;
      }
    }
  }
</style>